import { OrderType } from '@/enums'
import {
  cancelOrder,
  deleteOrder,
  followOrUnfollow,
  getPrescriptionPic
} from '@/services/consult'
import { getMedicalOrderDetail } from '@/services/order'
import type { ConsultOrderItem, FollowType } from '@/types/consult'
import type { OrderDetail } from '@/types/order'
import { showFailToast, showImagePreview, showSuccessToast } from 'vant'
import { onUnmounted } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

// 便于服用逻辑 => 自定义组合式api
export const useWindowWidth = () => {
  // 需求 能够在屏幕宽变化时 得到实时的w
  const w = ref<number>(0)
  const fn = () => {
    // console.log(111)
    w.value = window.innerWidth
  }

  onMounted(() => {
    // w.value = window.innerWidth // 页面一加载 先获取当前屏幕的宽度
    fn()

    // 监听resize事件 一旦发生屏幕的尺寸变化 立即获取最新的屏幕宽度
    window.addEventListener('resize', fn)
  })
  onUnmounted(() => {
    // 页面卸载时建议移除全局事件 释放内存
    window.removeEventListener('resize', fn)
  })

  return { w }
}

// 自定义组合式api => 泛型 => 泛型约束
// 泛型约束: 传递泛型时 限制你这个类型也要满足一些条件
export const useFollow = <T extends { id: string; likeFlag: number }>(
  type: FollowType
) => {
  const loading = ref(false)

  const follow = async (item: T) => {
    loading.value = true
    try {
      await followOrUnfollow(item.id, type)
      item.likeFlag = item.likeFlag === 1 ? 0 : 1
      // loading.value = false
    } finally {
      loading.value = false
    }
  }

  return {
    loading,
    follow
  }
}

export const useShowPrescription = () => {
  // 查看处方
  const showPrescription = async (id: string) => {
    // 请求处方单的url => 调用接口
    const res = await getPrescriptionPic(id)
    console.log(res.data.url)

    showImagePreview([res.data.url])
  }

  return {
    showPrescription
  }
}

export const useCancelOrder = () => {
  // 取消订单
  const loading = ref(false)
  const cancelConsultOrder = async (item: ConsultOrderItem) => {
    try {
      loading.value = true
      await cancelOrder(item.id)
      // 重新获取数据..
      // 原地改item status  statusValue
      item.status = OrderType.ConsultCancel
      item.statusValue = '已取消'

      showSuccessToast('取消成功')
    } catch {
      showFailToast('取消失败')
    } finally {
      loading.value = false
    }
  }

  return {
    loading,
    cancelConsultOrder
  }
}

// const {deleteLoading,deleteConsultOrder} = useDeleteOrder(() => { emit('on-delete', item.id) })
export const useDeleteOrder = (callback: () => void) => {
  // 删除订单:
  // 1. list列表页中删除 要做一件事=>通知父组件更新数据
  // 2. 订单详情中删除 要做一件事=>回到列表页
  const deleteLoading = ref(false)
  const deleteConsultOrder = async (item: ConsultOrderItem) => {
    try {
      deleteLoading.value = true
      await deleteOrder(item.id)
      // emit('on-delete', item.id) // 不是重新获取数据 而是利用自定义事件直接让父组件删除这个数据
      callback()
      showSuccessToast('删除成功')
    } catch (error) {
      showFailToast('删除失败')
    } finally {
      deleteLoading.value = false
    }
  }

  return {
    deleteLoading,
    deleteConsultOrder
  }
}

export const useOrderDetail = (id: string) => {
  const loading = ref(false)
  const order = ref<OrderDetail>()
  onMounted(async () => {
    loading.value = true
    try {
      const res = await getMedicalOrderDetail(id)
      order.value = res.data
    } finally {
      loading.value = false
    }
  })
  return { order, loading }
}
